;(function (window) {

  const hlCheckbox = {
    template:`<div class="hl-checkbox-container">
      <ul>
        <li
          class="item"
          :class="{ 'is-checked':selectedData.indexOf(item.code) > -1 , 'is-inline':checkboxWrapInline }"
          v-for="(item,index) in data"
          @click="handleClick(item,index)"
        >
          <span class="hl-checkbox-inner"></span>
          <p class="hl-checkbox-label">{{item.name}}</p>
        </li>
      </ul>
    </div>`,
    data(){
      return {

      }
    },
    model:{
      prop: 'selected',
      event:'on-select-item'
    },
    props:{
      data:{
        type:Array,
        default:() => []
      },
      selected:{
        type:Array,
        default:() => []
      },
      inline: {
        type:Boolean,
        default:true
      }
    },
    computed:{
      selectedData(){
        return this.selected
      },
      checkboxWrapInline(){
        return this.inline
      }
    },
    methods:{
      handleClick(item,index){
        const { code } = item
        const positonIndex = this.selectedData.indexOf(code)

        if(positonIndex > -1){
          this.selectedData.splice(positonIndex,1)
        }else{
          this.selectedData.push(code)
        }

        // 吐出所有选中的数据
        let allSelectedData = []
        this.data.forEach((el,i) => {
          if(this.selectedData.indexOf(el.code) > -1) allSelectedData.push(el)
        })

        this.$emit('on-select-item',this.selectedData)
        this.$emit('on-click',allSelectedData,event)
      }

    }
  }

  Vue.component('hl-checkbox',hlCheckbox)

} (window))
